<!-- 薪酬-基础设置-新增工资表模板-设置工资项 -->
<template>
  <article class="wrap">
    <main>
      <a-form>
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="" label="工资表模板名称" label-col-flex="100px">
              <a-input placeholder="请输入模板名称" style="width: 250px" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item field="" label="备注">
              <a-input
                :max-length="100"
                show-word-limit
                allow-clear
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <section>
        <header>
          <div>
            请根据员工月薪的拆分要求设置工资项，设置后，将用于月工资表明细数据录入、调薪等，也可用于各类报表、统计分析图中
          </div>
          <a-button
            type="primary"
            @click="
              router.push({
                name: 'AddWageAddition'
              })
            "
            >+新增工资项</a-button
          >
        </header>
        <main>
          <a-table stripe>
            <template #columns>
              <a-table-column data-index="" :width="200">
                <template #title>
                  <div
                    class="tableHeader"
                    @click="router.push({ name: 'PayStructure' })"
                  >
                    <icon-plus-circle :size="20" />
                    <span>设置薪酬结构</span>
                  </div>
                </template>
              </a-table-column>
              <a-table-column data-index="" :width="200">
                <template #title>
                  <div
                    class="tableHeader"
                    @click="router.push({ name: 'AddWageAddition' })"
                  >
                    <icon-plus-circle :size="20" />
                    <span>新增工资项</span>
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="描述" data-index="" :width="400">
              </a-table-column>
              <a-table-column title="加项/减项" data-index="" :width="100">
              </a-table-column>
              <a-table-column title="是否计税" data-index="" :width="100">
              </a-table-column>
              <a-table-column
                fixed="right"
                title="操作"
                data-index=""
                :width="200"
              >
                <template #cell="{}">
                  <a-space>
                    <a-button type="text">设置</a-button>
                    <a-button type="text">移除</a-button>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </main>
      </section>
    </main>
  </article>
</template>
<script lang="ts" setup>
const router = useRouter();
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;

  section {
    border-top: 1px solid #e0e0e0;
    header {
      display: flex;
      justify-content: space-between;
      margin: 20px 0px;
      div::before {
        content: '*';
        color: red;
      }
    }
    main {
      .tableHeader {
        display: flex;
        color: #165dff;
        align-items: center;
        cursor: pointer;
      }
    }
  }
}
:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 60px;
}
</style>
